<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> 
    <title>新地图编辑</title>
    <link href="./css/MBLayout.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="./css/Themes.css" />
    <!--拾色器脚本-->
    <script type="text/javascript" src="./javascript/ColoPicker.js"></script>
    <script type="text/javascript" src="./javascript/Require.js"></script>
</head>

<body>
    <div id="container" hidden="hidden" style="z-index: 4;position: absolute; display: none" >
        <button id="closeColoPicker">X</button>
        <div id="default" class="cp-default"></div>
        <div id="showcolor" class="sc-default"></div>
        <div class="io">
            <label>HEX</label>
            <input id="hex" type="text" value="" />
            <span id="rgb_css"></span>
            <label>R:</label>
            <input id="rgb_r" type="number" value="" />
            <label>G:</label>
            <input id="rgb_g" type="number" value="" />
            <label>B:</label>
            <input id="rgb_b" type="number" value="" />
        </div>
    </div>
    <div id="root" style="z-index: 1;">
        <div id="leftFunc">
            <table id="attributeText" style="width: 300px;background-color: rgb(155, 25, 85)" cellspacing="0">
                <tr>
                    <td>属性</td>
                    <td>赋值</td>
                </tr>
            </table>
            <div id="attributeBtn" style="text-align: center">地图</div>
            <table id="attributeTable" cellspacing="0">
                <tr>
                    <td>宽度</td>
                    <td><input id="sumWidth" disabled="false" type="number"></td>
                </tr>
                <tr>
                    <td>高度</td>
                    <td><input id="sumHeight" disabled="false" type="number"></td>
                </tr>
                <tr>
                    <td>图块角度</td>
                    <td><div id="setBlockAngle" type="number"> 0° </div></td>
                </tr>
                <tr>
                    <td>图块宽度</td>
                    <td><input id="setBlockWidth" type="number"></td>
                </tr>
                <tr>
                    <td>图块高度</td>
                    <td><input id="setBlockHeight" type="number"></td>
                </tr>
                <tr>
                    <td>图块起始索引</td>
                    <td><input id="setBlockStartIndex" type="number"></td>
                </tr>
                <tr>
                    <td>画布宽度</td>
                    <td><input id="setCanvasW" type="number"></td>
                </tr>
                <tr>
                    <td>画布高度</td>
                    <td><input id="setCanvasH" type="number"></td>
                </tr>
                <tr>
                    <td>背景色</td>
                    <td>
                        <div class="row-flex" style="margin: 0px auto;width: 88px">
                            <div id="tagBgColor"></div>
                            <div id="hexColor">#ffffff</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>行列信息</td>
                    <td><div id="mapInfo">[ 0 , 0 ]</div></td>
                </tr>
                <tr>
                    <td>坐标信息</td>
                    <td><div id="posInfo">[X 0, Y 0]</div></td>
                </tr>
                <tr>
                    <td>导出JS地图数组</td>
                    <td><input type="button" id="saveArrayBtn" value="导出数组" style="width: 100px"></td>
                </tr>
                <tr>
                    <td>导出JSON地图数组</td>
                    <td><input type="button" id="saveJsonBtn" value="导出JSON" style="width: 100px"></td>
                </tr>
            </table>
        </div>
        <div id="mainFunc" class="nui-scroll">
            <canvas id="bgCanvas"></canvas>
            <canvas id="mainCanvas"></canvas>
            <canvas id="fgCanvas"></canvas>
            <div class="eject-area" id="eject-area" style="display:none">
                <button  id="close-eject" style="width: 40px; height: 40px; position: absolute; border-radius: 5px 5px;
                left: 6px; top: 12px;">X</button>
                <textarea class="text-area" id="tex-tea">
                </textarea>
                <div>
                    <input id="tex-download" type="button" value="点击下载" style="width: 100px">
                    <input id="tex-copy" type="button" value="点击复制" style="width: 100px">
                    <label id="tips"></label>
                </div>
            </div>
        </div>
        <div id="rightFunc">
            <div id="topFunc">
                    
            </div>
            <div id="bottomFunc">
                +拖放文件至此处
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./javascript/Showcase.js"></script>
    <script type="text/javascript">require(["javascript/Main"]);</script>
</body>


</html>